<template>
  <partial-view v-ref:pv>
    <div  id="stair" class="panel panel-info auto;" style="height:auto">
      <div class="panel-heading">
      <h4>阶梯使用情况</h4>
      </div>
    	<div class="progress" id="srair">
        <div class="progress-bar" :class="cls[n]"  :style="{width: widths[n]}" v-for="n in jt">{{content[n]}}</div>
    	  <!--<div class="progress-bar progress-bar-success" style="width: 20%">
    		1.9元/m³
    	  </div>
    	  <div class="progress-bar progress-bar-info" style="width: 25%">
    		2.25元/m³
    	  </div>
    	  <div class="progress-bar progress-bar-warning" style="width: 30%">
    		2.8元/m³
    	  </div>
    	  <div class="progress-bar progress-bar-danger" style="width: 25%">
    		3.2元/m³
      </div>-->


    	</div>
      <table class="table table-bordered self-table " id="table1" >
         <thead>
           <th>气阶</th><th>上限</th><th>已用</th><th>未用</th><th>单价</th>
         </thead>
         <tbody>
           <tr>
             <td>一阶</td><td>{{mydata.f_stair1ceiling}}</td><td>{{mydata.f_hasuse1 > 0 ? mydata.f_hasuse1 : 0}}</td><td>{{mydata.f_stair1ceiling - mydata.f_hasuse1}}</td><td>{{mydata.f_stair1price}}</td>
           </tr>
           <tr v-if="jt === 2">
             <td>二阶</td><td>无上限</td><td>{{mydata.f_hasuse2 > 0 ? mydata.f_hasuse2 : 0}}</td><td>无上限</td><td>{{mydata.f_stair2price}}</td>
           </tr>
           <tr v-if="jt > 2">
             <td>二阶</td><td>{{mydata.f_stair2ceiling}}</td><td>{{mydata.f_hasuse2 > 0 ? mydata.f_hasuse2 : 0}}</td><td>{{mydata.f_stair2ceiling - mydata.f_stair1ceiling - (mydata.f_hasuse2 > 0 ? mydata.f_hasuse2 : 0)}}</td><td>{{mydata.f_stair2price}}</td>
           </tr>
           <tr v-if="jt === 3">
             <td>三阶</td><td>无上限</td><td>{{mydata.f_hasuse3 > 0 ? mydata.f_hasuse3 : 0}}</td><td>无上限</td><td>{{mydata.f_stair3price}}</td>
           </tr>
           <tr v-if=" jt > 3">
             <td>三阶</td><td>{{mydata.f_stair3ceiling}}</td><td>{{mydata.f_hasuse3 > 0 ? mydata.f_hasuse3 : 0}}</td><td>{{mydata.f_stair3ceiling - mydata.f_stair2ceiling - (mydata.f_hasuse3 > 0 ? mydata.f_hasuse3 : 0)}}</td><td>{{mydata.f_stair3price}}</td>
           </tr>
           <tr v-if="jt === 4">
             <td>四阶</td><td>无上限</td><td>{{mydata.f_hasuse4 > 0 ? mydata.f_hasuse4 : 0}}</td><td>无上限</td><td>{{mydata.f_stair4price}}</td>
           </tr>
           <tr v-if="jt > 4">
             <td>四阶</td><td>{{mydata.f_stair4ceiling}}</td><td>{{mydata.f_hasuse4 > 0 ? mydata.f_hasuse4 : 0}}</td><td>{{mydata.f_stair4ceiling - mydata.f_stair3ceiling - (mydata.f_hasuse4 > 0 ? mydata.f_hasuse4 : 0)}}</td><td>{{mydata.f_stair4price}}</td>
           </tr>
         </tbody>
       </table>

    </div>
  </partial-view>
</template>

<script>
/**
*阶梯气价相关信息组件
*/
import co from 'co'

let getdata = function * (self) {
  self.data.f_userinfo_id = self.data.f_userinfo_id + ''
  yield self.$refs.pv.load('rs/logic/gasfeecalculate', {data: {model: self.data, isGasValue: 1, value: 0}}).then((a) => {
    self.jt = a.data.chargeprice.length
    self.mydata = a.data
    self.calhasuse(self.mydata)
    if (self.jt === 1) {
      self.cls = ['progress-bar-success']
      self.widths = ['100%']
      self.content = [self.mydata.f_stair1price + '元/m³']
    } else if (self.jt === 2) {
      self.cls = ['progress-bar-success', 'progress-bar-danger']
      self.widths = ['50%', '50%']
      self.content = [self.mydata.f_stair1price + '元/m³', self.mydata.f_stair2price + '元/m³']
    } else if (self.jt === 3) {
      self.cls = ['progress-bar-success', 'progress-bar-warning', 'progress-bar-danger']
      self.widths = ['33%', '34%', '33%']
      self.content = [self.mydata.f_stair1price + '元/m³', self.mydata.f_stair2price + '元/m³', self.mydata.f_stair3price + '元/m³']
    } else if (self.jt === 4) {
      self.cls = ['progress-bar-success', ' progress-bar-info', 'progress-bar-warning', 'progress-bar-danger']
      self.widths = ['25%', '25%', '25%', '25%']
      self.content = [self.mydata.f_stair1price + '元/m³', self.mydata.f_stair2price + '元/m³', self.mydata.f_stair3price + '元/m³', self.mydata.f_stair4price + '元/m³']
    }
  })
}

export default {
  props: ['data'],
  data () {
    return {
      myChart: {},
      jt: 0,
      width: 0,
      widths: [],
      cls: [],
      length: 0,
      mydata: '',
      values: 0
    }
  },
  methods: {
    getd () {
      this.mydata = ''
      let gen = getdata(this)
      co(gen)
    },
    calhasuse (value) {
      value.f_hasuse1 = (value.sumamount >= value.f_stair1ceiling ? value.f_stair1ceiling : value.sumamount).toFixed(2)
      value.f_hasuse2 = (value.sumamount >= value.f_stair2ceiling ? value.f_stair2ceiling - value.f_stair1ceiling : value.sumamount - value.f_stair1ceiling).toFixed(2)
      value.f_hasuse3 = (value.sumamount >= value.f_stair3ceiling ? value.f_stair3ceiling - value.f_stair2ceiling : value.sumamount - value.f_stair2ceiling).toFixed(2)
      value.f_hasuse4 = (value.sumamount >= value.f_stair4ceiling ? value.f_stair4ceiling - value.f_stair3ceiling : value.sumamount - value.f_stair3ceiling).toFixed(2)
    }
  },
  watch: {

    'data' (val) {
      this.getd()
    }
  },
  ready () {
    this.getd()
  }
}
</script>
<style media="screen">
  #srair{
	height: 30px;
  margin-top:10px;
  margin-bottom: 10px;
  }
  #srair .progress-bar {
  line-height: 25px !important;
  }
  #table1{
    text-align:center;
  }
  .self-table > tbody > tr > td {
    padding: 3px;
    text-align: center;
  }
</style>
